<template>
  <el-dialog

  :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">

    
    <el-form-item :label="dataFormProps.label" prop="auth">
      <el-input v-model="dataForm.authContent" :disabled="inputDisable" :placeholder="dataFormProps.label"></el-input>
    </el-form-item>
    <el-form-item label="验证码" prop="veriCode" >
      <el-input v-model="dataForm.veriCode" placeholder="验证码" style="width:140px"></el-input>
      <el-button primary @click="getVeriCode()"  :disabled="buttonDisabled" style="width: 112px">{{buttonInfo}}</el-button>
      <span style="color:red">{{localAuthInfo}}</span>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="bindOrUnbind()">{{dataFormProps.bind}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  components: {
    
  },
  mounted() {
    
  },
  props:{
    getLocalAuthList: Function,
  },
  data() {
    return {
      visible: false,
      buttonDisabled: false,
      buttonInfo: "获取验证码",
      countdown: 0,
      inputDisable: false,
      localAuthInfo:'',
      dataForm:{
        uid: this.currentUser.user.uid,
        authContent:"",
        veriCode: "",
      },
      authObj: {},
      dataFormProps:{
          label:"",
          bind:"",
      },
      dataRule:{},
    }
  },
  methods: {
    // 初始化 对话框
    init(obj){
        this.inputDisable = false
        this.dataForm.authContent = ""
        this.dataForm.veriCode = ''
        this.authObj = obj;
        var _props = this.dataFormProps;
        if(obj.authType == 1){
            _props.label = '手机'
        }else if(obj.authType == 2){
            _props.label = '邮箱'
        }
        if(obj.showStatus == 0){ // 来绑定
            _props.bind = '绑定'
        }else if(obj.showStatus == 1){ // 来解绑
            _props.bind = '解绑'
            this.inputDisable = true
            this.dataForm.authContent = obj.authContent
        }
        this.visible = true

    },
    // 获取验证码
    getVeriCode(){
        var data = {
            uid: this.currentUser.user.uid,
            authType: this.authObj.authType,
            authContent: this.dataForm.authContent,
        };
        console.log("获取验证码。。。。。。", data)
        this.buttonDisabled = true;
        this.countdown = 3;
        this.buttonInfo = this.countdown + 's'
        this.timer = setInterval(() => {
            this.countdown--;
            if(this.countdown == 0){
                this.buttonDisabled = false;
                clearInterval(this.timer)
                this.buttonInfo = "获取验证码"
            }else{
                this.buttonInfo = this.countdown + 's'
            }
        }, 1000);
        // return;
        this.$http1({
          url: this.$http.adornUrl("/user/user/local/auth/verify"),
          method: "post",
          data: this.$http.adornData(data, false)
        }).then(({ data }) => {
          this.$message({
            type: "success",
            message: "发送验证码!",
          });
          
        });
    },
    // 绑定 or 解绑
    bindOrUnbind(){
      this.localAuthInfo = '';
        var data = {
            "uid": this.currentUser.user.uid,
            "authType": this.authObj.authType,
            "authContent": this.dataForm.authContent,
            "veriCode": this.dataForm.veriCode,
            "showStatus": (this.authObj.showStatus + 1) % 2,
        }
        console.log("bindOrUnbind", data)
        // return ;
        this.$http1({
          url: this.$http.adornUrl("/user/user/local/auth/bind"),
          method: "post",
          data: this.$http.adornData(data, false)
        }).then(({ data }) => {
          if(data.code == 10200 || data.code == 10201){
            this.$message({
              type: "success",
              message: data.msg,
            });
            this.visible = false
            this.getLocalAuthList()
          }else{
            this.localAuthInfo = data.msg;
          }
        });
    }


  },
}
</script>

<style>

</style>